<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<jsp:include page="/header"></jsp:include>
	
	
	
	<!--=====================
    Breadcrumb Aera Start
    =========================-->
    <div class="breadcrumbs_area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        <ul>
                            <li>
                                <h1><a href="/shoppingsix/indexTwo">首页</a></h1>
                            </li>
                            <li>
                                <h1><a href="/shoppingsix/shop_computer">笔记本电脑</a></h1>
                            </li>
                            <li>商品详情</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--=====================
    Breadcrumb Aera End
    =========================-->

    <!-- ========================
    Product Details Area Start 
    ===========================-->
    <div class="product-area product-details-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-12 mt-50">
                    <!-- Product Zoom Image start -->
                    <div class="product-slider-container arrow-center text-center">
                    <c:forEach items="${detailcomputer }" var="de">
                    <div class="product-item">
                            <a href="${de.Purl }"><img src="${de.Purl }" class="img-fluid" alt="" /></a>
                        </div>
                    </c:forEach>
                    </div>
                    <!-- Product Zoom Image End -->
                    <!-- Product Thumb Zoom Image Start -->
                    <div class="product-details-thumbnail arrow-center text-center">
                         <c:forEach items="${detailcomputer }" var="de">
                    <div class="product-item">
                            <a href="${de.Purl }"><img src="${de.Purl }" class="img-fluid" alt="" /></a>
                        </div>
                    </c:forEach>
                    </div>
                </div>
                <div class="col-lg-7 col-12 mt-45">
                    <!-- Product Summery Start -->
                    <form  action="#" class="layui-form" onsubmit="false">
                    <div class="product-summery position-relative">
                        <div class="product-head">
                            <h1 class="product-title">${detailcomputer[0].Pname }</h1>
                            <div class="product-arrows text-right">
                                <a href="#"><i class="fa fa-long-arrow-left"></i></a>
                                <a href="#"><i class="fa fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                        <div class="rating-meta d-flex">
                            <div class="rating">
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                            </div>
                            <ul class="meta d-flex">
                                <li>
                                    <a href="#"><i class="fa fa-commenting-o"></i>阅读评论(3)</a>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-edit"></i>写评论</a>
                                </li>
                            </ul>
                        </div>
                        <div class="price-box">
                            <span class="regular-price">${detailcomputer[0].Pprice }</span>
                        </div>
                        <div class="product-description">
                            <p>${detailcomputer[0].Pdescribe }</p>
                        </div>
                        <div class="product-packeges">
                            <table>
                                <tbody>
                                    <tr>
                                        <td class="label"><span>尺寸</span></td>
                                        <td class="value">
                                            <div class="product-sizes">
                                                <a href="#">大</a>
                                                <a href="#">中</a>
                                                <a href="#">小</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label"><span>颜色</span></td>
                                        <td class="value">
                                            <div class="product-colors">
                                                <a href="#" data-bg-color="#000000" style="background-color: rgb(0, 0, 0);"></a>
                                                <a href="#" data-bg-color="#ffffff" style="background-color: rgb(255, 255, 255);"></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label"><span>数量</span></td>
                                        <td class="value">
                                            <div class="product-quantity">
                                                <span class="qty-btn minus"><i class="fa fa-angle-down"></i></span>
                                                <input type="text" class="input-qty" value="1" name="Shshopp_sum" id="Shshopp_sum">
                                                <span class="qty-btn plus"><i class="fa fa-angle-up"></i></span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="product-buttons grid_list">
                            <div class="action-link">
                            <input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${detailcomputer[0].Pid }" name="Pid" id="Pid"  >
							<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${detailcomputer[0].Sid }" name="Sid" id="Sid"  >
							<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${detailcomputer[0].Pprice }" name="Pprice" id="Pprice"  >
                                <a class="compare-add same-link" href="compare.html" title="加入比较"><i class="zmdi zmdi-refresh-alt"></i></a>
                                <button class="btn-secondary" type="submit" lay-submit lay-filter="form2">添加到购物车</button>
                                <a class="wishlist-add same-link" href="" lay-submit lay-filter="form1" type="submit"
                                            title="加入愿望清单"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                            </div>
                        </div>
                        <div class="product-meta">
                            <div class="desc-content">
                                <div class="social_sharing d-flex">
                                    <h5>分享这个帖子:</h5>
                                    <ul>
                                        <li><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#" title="pinterest"><i class="fa fa-pinterest"></i></a></li>
                                        <li><a href="#" title="google+"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#" title="linkedin"><i class="fa fa-linkedin"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                    <!-- Product Summery End -->
                </div>
            </div>
            <div class="row mt-40">
                <div class="col-lg-3 col-sm-3 col-md-2">
                    <!-- Product Description Tab Start -->
                    <div class="product-desc-tab">
                        <ul class="nav flex-column" role="tablist">
                            <li><a class="active" href="#description" role="tab" data-toggle="tab" aria-selected="false">描述</a></li>
                            <li><a href="#sheet" role="tab" data-toggle="tab" aria-selected="false">数据表</a></li>
                            <li><a href="#reviews" role="tab" data-toggle="tab" aria-selected="true">评论</a></li>
                        </ul>
                    </div>
                    <!-- Product Description Tab End -->
                </div>
                <div class="col-lg-9 col-sm-9 col-md-10">
                    <div class="product-desc-tab-content">
                        <!-- Start Single Content -->
                        <div role="tabpanel" id="description" class="product_tab_content fade active show">
                            <div class="product_description_wrap mt-20">
                                <div class="product_desc">
                                    <h2 class="last-title mb-20">细节</h2>
                                    <p> 这款新产品的硬件规格是：第六代移动酷睿i7 6820HK可超频处理器；8GB*2 DDR4 2133高速双通道内存；板载HD530核芯显卡同时配备GTX980M旗舰独显。在硬盘存储方面，这款产品选择了Nvme接口的512GB固态硬盘与1TB机械硬盘的组合，做到了与时俱进。 i7 6820HK是Skylake-H第六代BGA封装移动I7 处理器，采用14纳米制程，拥有完整的四个物理核心和额外的四个虚拟超线程，同时配备了完整的8MB L3三级缓存。在频率方面，其最大单核睿频为36倍频，基础频率为30倍频，待机频率为8倍频，四核满载睿频为32倍频。</p>
                                </div>
                                <div class="pro__feature mt-20">
                                    <h2 class="last-title mb-20">特征</h2>
                                    <ul class="feature_list">
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>高亮，高刷新的显示器</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>分辨率为1080P，接口可扩展</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>顶级性能，顶级散热能力</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>游戏性能，美中有憾</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Content -->
                        <!-- Start Single Content -->
                        <div role="tabpanel" id="sheet" class="product_tab_content fade">
                            <div class="pro__feature mt-20">
                                <h2 class="last-title mb-20">特征</h2>
                                <ul class="feature_list">
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>高亮，高刷新的显示器</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>分辨率为1080P，接口可扩展</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>顶级性能，顶级散热能力</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>游戏性能，美中有憾</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- End Single Content -->
                        <!-- Start Single Content -->
                        <div role="tabpanel" id="sheet" class="product_tab_content fade">
                            <div class="pro__feature mt-20">
                                <h2 class="last-title mb-20">特征</h2>
                                <ul class="feature_list">
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>2.7英寸可折叠式LCD　</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>Live View开关　</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>智慧变焦按钮</a></li>
                                        <li><a href="#"><i class="zmdi zmdi-play-circle"></i>1420万像素标志　</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- End Single Content -->
                        <!-- Start Single Content -->
                        <div role="tabpanel" id="reviews" class="product_tab_content fade">
                            <div class="review_address_inner mt-20">
                                <!-- Start Single Review -->
                                <c:forEach items="${user }" var="u">
                                <div class="pro_review">
                                    <div class="review_thumb">
                                        <img src="assets/images/blog/comment/comment-3.jpg" alt="review images">
                                    </div>
                                    <div class="review_details">
                                        <div class="review_info">
                                            <a class="last-title" href="#">${u.Cname }</a>
                                            <div class="rating">
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                            </div>
                                            <div class="rating_send">
                                                <a href="#"><i class="zmdi zmdi-mail-reply"></i></a>
                                                <a href="#"><i class="zmdi zmdi-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="review_date">
                                            <span>评论时间：${u.Curl }</span>
                                        </div>
                                        <p>${u.Ccontent }</p>
                                    </div>
                                </div>
                                </c:forEach>
                                <!-- End Single Review -->
                               <%--  <!-- Start Single Review -->
                                <div class="pro_review pro-second">
                                    <div class="review_thumb">
                                        <img src="assets/images/blog/comment/comment-3.jpg" alt="review images">
                                    </div>
                                    <div class="review_details">
                                        <div class="review_info">
                                            <a class="last-title" href="#">${user[1].Cname }</a>
                                            <div class="rating">
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                            </div>
                                            <div class="rating_send">
                                                <a href="#"><i class="zmdi zmdi-mail-reply"></i></a>
                                                <a href="#"><i class="zmdi zmdi-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="review_date">
                                            <span>2016年6月27日下午2:30</span>
                                        </div>
                                        <p>${user[1].Ccontent }</p>
                                    </div>
                                </div>
                                <!-- End Single Review --> --%>
                            </div>
                            <!-- Start RAting Area -->
                            <div class="rating_wrap mt-20">
                                <h4 class="last-title">你的评分</h4>
                                <div class="rating_list mt-20">
                                    <!-- Start Single List -->
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <!-- End Single List -->
                                </div>
                            </div>
                            <!-- End RAting Area -->
                            <div class="comments_form">
                                <h3>发表评论</h3>
                                <p>您的电子邮件地址不会被公开。必需的地方已做标记 *</p>
                                <form class="layui-form" onsubmit="false"  action="">
                                    <div class="row">
                                        <div class="col-12">
                                            <label for="review_comment">评论 </label>
                                            <textarea lay-verify="required"  name="Ccontent" id="review_comment" spellcheck="false" data-gramm="false"></textarea>
                                        </div>
                                    </div>
                                    <button lay-submit lay-filter="formDemo" class="button" type="submit">发表评论</button>
                                </form>
                            </div>
                        </div>
                        <!-- End Single Content -->
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="product-details-home2 mt-45 mb-15">
                        <div class="block-title">
                            <h6>相关产品</h6>
                        </div>
                        <div class="product-carousel-home2 slick-custom slick-custom-default nav-top">
                        <c:forEach items="${detailcomputer }" var="de">
                            <div class="product-row">
                                <!-- Single-Product-Start -->
                                 <form  action="#" class="layui-form" onsubmit="false">
                                <div class="item-product">
                                    <div class="product-thumb">
                                        <a href="${de.PskipUrl }">
                                            <img src="${de.Purl }" alt="" class="img-fluid">
                                        </a>
                                        <div class="action-link">
                                            <a class="quick-view same-link" href="#" title="快速查看" data-toggle="modal" data-target="#modal_box" data-original-title="quick view"><i class="zmdi zmdi-eye zmdi-hc-fw"></i></a>
                                            <a class="compare-add same-link" href="compare.html" title="加入比较"><i class="zmdi zmdi-refresh-alt"></i></a>
                                            <a class="wishlist-add same-link" href="" lay-submit lay-filter="form1" type="submit"
                                            title="加入愿望清单"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
                                        </div>
                                    </div>
                                    <div class="product-caption">
                                        <div class="product-name">
                                            <a href="${de.PskipUrl }">${de.Pname }</a>
                                        </div>
                                        <div class="rating">
                                            <span class="yellow"><i class="fa fa-star"></i></span>
                                            <span class="yellow"><i class="fa fa-star"></i></span>
                                            <span class="yellow"><i class="fa fa-star"></i></span>
                                            <span class="yellow"><i class="fa fa-star"></i></span>
                                            <span class="yellow"><i class="fa fa-star"></i></span>
                                        </div>
                                        <div class="price-box">
                                            <span class="regular-price">${de.Pprice }</span>
                                        </div>
                                        <input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${de.Pid }" name="Pid" id="Pid"  >
										<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${de.Sid }" name="Sid" id="Sid"  >
											<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${de.Pprice }" name="Pprice" id="Pprice"  >
                                        <div class="cart">
                                            <div class="add-to-cart">
                                                <a class="cart-plus" type="submit" lay-submit lay-filter="form" title="加入购物车"><i class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </form>
                                <!-- Single-Product-End -->
                            </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ========================
    Product Details Area End 
    ===========================-->
	

<!--===================
     footer area start 
    ===================-->
	<footer class="mt-30">
		<!-- Newslatter area start -->
		<div class="newsletter-group">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-lg-6 col-12">
						<div class="newsletter-inner d-flex align-items-center">
							<i class="fa fa-envelope-open-o"></i>
							<div class="newsletter-title">
								<h1 class="sign-title">注册我们的通讯</h1>
								<p>获取有关我们最新商店和特惠信息的电子邮件更新。</p>
							</div>
						</div>
					</div>
					<div class="col-lg-6 col-12">
						<div class="newsletter-box">
							<form id="mc-form" class="mc-form">
								<input type="email" id="mc-email" class="email-box"
									placeholder="输入你的电子邮箱" name="EMAIL">
								<button id="mc-submit" class="newsletter-btn" type="submit">订阅</button>
							</form>
							<!-- mailchimp-alerts Start -->
							<div class="mailchimp-alerts text-centre">
								<div class="mailchimp-submitting"></div>
								<!-- mailchimp-submitting end -->
								<div class="mailchimp-success text-success"></div>
								<!-- mailchimp-success end -->
								<div class="mailchimp-error text-danger"></div>
								<!-- mailchimp-error end -->
							</div>
							<!-- mailchimp-alerts end -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Newslatter area End -->
		<!-- Footer Top Start -->
		<div class="footer-top mt-50 mb-40">
			<div class="container">
				<div class="row">
					<div class="col-lg-4">
						<div class="footer-single-widget">
							<div class="footer-logo mb-40">
								<a href="index"><img
									src="assets/images/logo/pos-circle-logo.jpg" alt=""></a>
							</div>
							<div class="widget-body">
								<div class="widget-address mt-30 mb-20">
									<p>
										<strong>地址:</strong>新乡市，红旗区，新乡职业技术学院
									</p>
									<p>
										<strong>联系电话:</strong> (800) 123 456 - (800) 123 456.
									</p>
									<p>
										<strong>电子邮箱:</strong> support@circleshop.com
									</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-8">
						<div class="row">
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>信息</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">隐私政策</a></li>
											<li><a href="#">条款及细则</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>我的账户</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">我的帐户</a></li>
											<li><a href="#">心愿单</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>快速找到</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">历史悠久</a></li>
											<li><a href="#">新闻快报</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>客户服务</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">网站地图</a></li>
											<li><a href="#">联系我们</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Footer Top End -->
	</footer>
	<!--===================
     footer area end 
    ===================-->


	<!-- Use the minified version files listed below for better performance and remove the files listed above -->
	<script src="assets/js/vendor/vendor.min.js"></script>
	<script src="assets/js/plugins/plugins.min.js"></script>

	<!-- Main JS -->
	<script src="assets/js/main.js"></script>
	<script>
    //Demo
    layui.use('form', function() {
      var form = layui.form;
      var $ = layui.jquery;
      //监听提交心愿单
		form.on('submit(form2)', function(data) {
			var d = data.field;//表单中的数据，定义一个对象来接收
			var url = '/shoppingsix/shopping-cart_add_num';
			$.post(url, d, function(data) {
				if (data.code!=201) {
					console.log(data.code);
				if(data.count>0){
					console.log('添加成功');
					/* layer.msg('添加成功');//在页面显示添加成功 */
					window.location.href = "shopping-cart";
				}else{
					layer.msg(data.data);
				}
			}else{
				console.log("请登录");
				window.location.href = "login_car.jsp";
			}
			}, "json");
			return false;
		});
    //监听提交心愿单
		form.on('submit(form1)', function(data) {
			var d = data.field;//表单中的数据，定义一个对象来接收
			var url = '/shoppingsix/wishlist_add';
			$.post(url, d, function(data) {
				if (data.count > 0) {
					console.log('添加成功');
					/* layer.msg('添加成功');//在页面显示添加成功 */
					window.location.href = "wishlist";
				}
			}, "json");
			return false;
		});
    //监听提交加入购物车
		form.on('submit(form)', function(data) {
			var d = data.field;//表单中的数据，定义一个对象来接收
			var url = '/shoppingsix/shopping-cart_add';
			$.post(url, d, function(data) {
				if (data.code!=201) {
					console.log(data.code);
				if(data.count>0){
					console.log('添加成功');
					/* layer.msg('添加成功');//在页面显示添加成功 */
					window.location.href = "shopping-cart";
				}else{
					layer.msg(data.data);
				}
			}else{
				console.log("请登录");
				window.location.href = "login_car.jsp";
			}
			}, "json");
			return false;
		});
      //监听提交
      form.on('submit(formDemo)', function(data) {
        var d = data.field;//表单中的数据，定义一个对象来接收
        var url = '/shoppingsix/comments_add_content';
        $.post(url, d, function(data) {
          if (data.count > 0) {
            layer.msg('评论成功', {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
              }, function(){
                //do something
              });
            setTimeout(function () {
                    window.parent.location.reload();
                  }, 2000);
          }
        }, "json");
        return false;
      });
    });
    </script>
</body>
</html>